<template>
	<view>
<!-- 		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="cu-list">
					<view class="cu-item padding">
						<view class="content flex--sub">
							<view>
								<text>客户名称：</text>
								<text class="text-grey">{{userItem.nickName}}</text>
							</view>
							<view>
								<text>联系方式：</text>
								<text class="text-grey">{{userItem.phonenumber}}</text>
							</view>
							<view>
								<text>公司邮箱：</text>
								<text class="text-grey">{{userItem.email}}</text>
							</view>
							<view>
								<text>公司简介：</text>
								<text class="text-grey">{{userItem.remark}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="middleInfo baseBack" style="margin-top: 30rpx;" v-if="planList.length === 0">
			<u-empty icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
		</view>

		<view class="cu-timeline margin-bottom" v-for="(item,index) in planList">
			<view class="cu-item">
				<view class="content">
					<view class="radius cf">
						<view class="cu-tag bg-cyan">{{item.createTime | dateFormat}}</view>
						<view class="cu-tag line-cyan">{{item.createTime | timeFormat}}</view>
						<view class="fr" @tap="delPlan(item.planId)">
							<text class="cuIcon-close text-red fr"></text>
						</view>
					</view>
					
					<view class="">
						<uni-table>
							<uni-tr>
								<uni-th width="100" align="center">任务名称</uni-th>
								<uni-th width="50" align="center">数量</uni-th>
								<uni-th width="100" align="center">布种</uni-th>
								<uni-th width="70" align="center">操作</uni-th>
							</uni-tr>
							<uni-tr v-for="(item1,index1) in planList[index].taskList">
								<uni-td align="center">{{item1.title}}</uni-td>
								<uni-td>{{item1.num}}</uni-td>
								<uni-td align="center">{{item1.clothName}}</uni-td>
								<uni-td>
									<button class="cu-btn round sm  bg-blue shadow" @click="changeState(item1)" :disabled="item1.isDo ===2">完成</button>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
			</view>
		</view>

		<!--    =====================================================================================
		 新增任务弹出框
		===================================================================================== -->
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">生产计划</view>
					<view class="action" @tap="addTask">
						<text class="cuIcon-add text-red"></text>
					</view>
				</view>
				<view class="" v-for="(item,index) in datalist">
					<view class="margin">
						<view class="cu-bar bg-white justify-end">
							<view class="content">任务{{index+1}}</view>
							<view class="action" @tap="delTask(index)">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<view>
							<view class="cu-form-group">
								<view class="price">订单名称</view>
								<input placeholder="请输入订单名称" name="input" v-model="datalist[index].title"></input>
							</view>
							<view class="cu-form-group">
								<view class="num">数量</view>
								<input placeholder="请输入数量" name="input" v-model="datalist[index].num"></input>
							</view>
							<view class="cu-form-group">
								<view class="margin-right">布种</view>
								<uni-data-picker style="text-align: left;width: 80%;" placeholder="请选择布种" v-model="datalist[index].clothId" :localdata="range":preload="true">
								</uni-data-picker>
<!-- 								<input placeholder="请输入描述" name="input" v-model="datalist[index].detail"></input> -->
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="determine">确定</button>
					</view>
				</view>
			</view>
		</view>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" @fabClick="goAdd()" />
	</view>
</template>

<script>
	import {
		addPlans,
		getPlanList,
		delPlan
	} from '@/api/company/plan.js';
	
	import { updateTask } from '@/api/company/task.js'
	import {
		selectMulclo
	} from '@/api/cloth/fzCloth.js'
	import {
		forEach
	} from 'lodash';
	import moment from 'moment';
	export default {
		data() {
			return {
				queryParams: {
					userId: '',
					nickName: '',
					planName: '',
					companyId: '',
					taskList: []
				},
				userItem: {},
				modalName: '',
				datalist: [{
					title: '',
					num: '',
					clothId: '',
				}],
				planList: [],
				range: [],
			}
		},
		onLoad(options) {
			this.userItem = JSON.parse(decodeURIComponent(options.user));
			this.queryParams.userId = this.userItem.userId
		    this.queryParams.nickName = this.userItem.nickName
			this.queryParams.companyId = this.$store.getters.companyId
			this.getDataList()
			this.getClothList()
		},
		filters: {
			dateFormat(time) {
				var moment = require('moment');
				return moment(time).format("YYYY-MM-DD")
			},
			timeFormat(time) {
				var moment = require('moment');
				return moment(time).format("HH:mm")
			},
		},
		methods: {
			getClothList() {
				selectMulclo({companyId: this.$store.getters.companyId,}).then(res => {
					this.clothList = res.rows
					res.rows.forEach(item => {
						this.range.push({
							value: item.clId,
							text: item.clName
						})
					})
				})
			},
			changeState(item){
				uni.showModal({
					title: '提示',
					content: '任务是否完成？',
					success: res => {
						if (res.confirm) {
							item.isDo = 2
							updateTask(item).then(rep =>{
								if (rep.code == 200) {
									this.$modal.msgSuccess("更新成功")
									this.getDataList()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			delPlan(planId) {
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: res => {
						if (res.confirm) {
							delPlan(planId).then(rep => {
								if (rep.code == 200) {
									this.$modal.msgSuccess("删除成功")
									this.getDataList()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			addTask() {
				this.datalist.push({
					title: '',
					num: '',
					clothId: '',
				})
			},
			delTask(index) {
				this.datalist.splice(index, 1)
			},
			goAdd() {
				this.modalName = 'DialogModal'
			},
			hideModal() {
				this.modalName = ''
				this.datalist = [{
					title: '',
					num: '',
					clothId: '',
				}]
			},
			determine() {
				//开关类型布尔值
				let flag = true;
				this.datalist.forEach(obj=>{
					for (var keys in obj) {
						//判断数据类型
						if (typeof obj[keys] == "string") {
							if (!obj[keys].trim()) {
								flag = false;
								break;
							}
						}
					}
				})
				if (flag) {
					this.queryParams.taskList = this.datalist
					addPlans(this.queryParams).then(rep => {
						if (rep.code == 200) {
							this.modalName = ''
							this.$modal.msgSuccess("添加成功")
							this.getDataList()
						}
					})
				} else {
					this.$modal.msgError("请填写完整的任务信息")
				}
			},
			getDataList() {
				let data = {
					userId: this.queryParams.userId,
					companyId: this.queryParams.companyId
				}
				getPlanList(data).then(rep => {
					this.planList = rep.rows
				})
			}
		}
	}
</script>

<style scoped>
	/deep/.uni-fab__circle {
		width: 40px;
		height: 40px;
	}
	/deep/.cu-timeline .cu-item{
		padding:  10rpx 10rpx 10rpx 95rpx;
	}
	/deep/.cu-timeline .cu-item .content{
		padding: 15rpx;
	}
	.middleInfo{
		margin: 0rpx auto;
	}
	.baseBack{
		width: 92%;
		background-color: #fff;
	}
</style>
